import { large_screen_get_healthydata } from '@/services/bigdata';
import { get_healthydata } from '@/services/patient';
import { Line } from '@ant-design/charts';
import { Radio } from 'antd';
import { memo, useEffect, useState } from 'react';

// var minvalue = 0;
interface Iprops {
  editId: number | undefined;
  token:any;
}
const HamCharts = (props: Iprops) => {
  const { editId ,token} = props;
  useEffect(() => {
    console.log('456', editId);
  }, [editId]);
  // 图表数据
  const [daydata, setDaydata] = useState<any>([]);
  //有无数据标识0没数据 1有数据
  const [dataFlag, setdataFlag] = useState(0);

  // 页面初始化
  useEffect(() => {
    setDaydata(get_status());
    get_ham_data(0);
  }, [editId]);

  // 返回图表数据为空的默认数组，用来显示图表横坐标和类别category
  const get_status = () => {
    var new_data = [];
    for (let i = 0; i < 24; i += 3) {
      let time = '';
      if (i.toString().length == 1) {
        time = '0' + i;
      } else {
        time = i.toString();
      }
      time += ':00:00';
      new_data.push({
        time,
        category: '收缩压',
      });
      new_data.push({
        time,
        category: '舒张压',
      });
      new_data.push({
        time,
        category: '心率',
      });
    }
    return new_data;
  };

  // 获取心率数据
  const get_ham_data = async (status: number) => {
    let request_body = {
      old_id: editId,
      type: 'ham',
      status,
    };
    let params: any = await large_screen_get_healthydata(token,request_body);
    if (params.code == 200) {
      var new_data: any = init_data(params.data.list);
      console.log(params.data);
      if (new_data.length != 0) {
        setDaydata(new_data);
        setdataFlag(1);
      } else {
        setDaydata(get_status());
        setdataFlag(0);
      }
    }
  };
  // 年月日改变
  const change_status = (e: any) => {
    get_ham_data(e.target.value);
  };

  const init_data = (data: any) => {
    var new_data = [];
    if (data != undefined) {
      // minvalue =
      //   data.length == 0 ? 5 : get_minvalue(data[0].diastolic, data[0].pressure, data[0].pulse);
      for (let i = 0; i < data.length; i++) {
        new_data.push({
          time: data[i].x,
          value: parseFloat(data[i].pressure),
          category: '收缩压',
        });
        new_data.push({
          time: data[i].x,
          value: parseFloat(data[i].diastolic),
          category: '舒张压',
        });
        new_data.push({
          time: data[i].x,
          value: parseFloat(data[i].pulse),
          category: '心率',
        });
        // var setvalue = get_minvalue(data[i].diastolic, data[i].pressure, data[i].pulse);
        // if (minvalue > setvalue) {
        //   minvalue = setvalue;
        // }
      }
      // minvalue = minvalue - 5 < 0 ? 0 : minvalue - 5;
      return new_data;
    }
  };
  // 获取最小值
  // const get_minvalue = (a: any, b: any, c: any) => {
  //   var value = a;
  //   a = parseFloat(a);
  //   b = parseFloat(b);
  //   c = parseFloat(c);
  //   if (a > b) {
  //     value = b;
  //   }
  //   if (value > c) {
  //     value = c;
  //   }
  //   return value;
  // };

  // 图表配置
  const Hamconfig = {
    data: daydata,
    height: 200,
    xField: 'time',
    yField: 'value',
    yAxis: {
      // min: minvalue,
      //根据有无数据处理纵坐标最大值，在无数据的时候可显示纵坐标
      max: dataFlag == 0 ? 100 : null,
    },
    seriesField: 'category',
    tooltip: {
      customContent: (title: string, items: any) => {
        return (
          <div style={{ width: '110px', height: '90px', fontSize: '14px' }}>
            <div style={{ marginTop: '8px' }}>{items[0] && items[0].data.time}</div>
            <div>
              <div style={{ marginTop: '8px', marginLeft: '8px' }}>
                <span>收缩压：</span>
                {items[0] && items[0].data.value}
              </div>
              <div style={{ marginTop: '8px', marginLeft: '8px' }}>
                <span>舒张压：</span>
                {items[1] && items[1].data.value}
              </div>
              <div style={{ marginTop: '8px', marginLeft: '8px' }}>
                <span>心率：</span>
                {items[2] && items[2].data.value}
              </div>
            </div>
          </div>
        );
      },
    },
  };
  return (
    <>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          width: '500px',
          height: '45px',
          alignItems: 'center',
          marginBottom: '15px',
        }}
      >
        <p
          style={{
            fontSize: '16px',
            color: 'rgba(23, 23, 37, 1)',
            marginBottom: '0px',
          }}
        >
          血压曲线图mmHg
        </p>
        <Radio.Group onChange={change_status} defaultValue={0} size="middle" buttonStyle="solid">
          <Radio.Button value={0} style={{ width: '80px', textAlign: 'center' }}>
            日
          </Radio.Button>
          <Radio.Button value={1} style={{ width: '80px', textAlign: 'center' }}>
            周
          </Radio.Button>
          <Radio.Button value={2} style={{ width: '80px', textAlign: 'center' }}>
            月
          </Radio.Button>
        </Radio.Group>
      </div>
      <Line {...Hamconfig} style={{ width: '500px' }} />
    </>
  );
};
export default memo(HamCharts);
